<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	*{
		padding:0;
		margin:0 auto;
		}
	body{
		width:2400px;
		background:url(images/images/1.png) no-repeat;
		background-size:cover;
		font-family:"微软雅黑";
		}
	header,footer{
		width:100%;
		height:40px;
		line-height:40px;
		text-align:center;
		position:fixed;   /*固定布局*/
		background-color:#999;
		position:fixed;
		color:#fff;
		font-size:20px;
		letter-spacing:10px;
		font-weight:500;
		opacity:0.7;
		}
	header{
		top:0;
		left:0;
		}
	footer{
		bottom:0;
		left:0;
		}
	footer p span{
		background:url(images/images/tree1.png) no-repeat left center;
		padding-left:30px;
		}
	article{
		width:95%;
		height:640px;
		margin-top:80px;
		-moz-animation:start 4s ease-in 1 normal;
		}
		
	/*一帧的动作*/
	@-moz-keyframes start{
		0%{
			-moz-transform:translateX(1000px);
			opacity:0
			}
		20%{
			-moz-transform:translateX(800px);
			opacity:0.5
			}
		40%{
			-moz-transform:translateX(600px);
			opacity:0.6
			}
		60%{
			-moz-transform:translateX(400px);
			opacity:0.7
			}
		80%{
			-moz-transform:translateX(200px);
			opacity:0.8
			}
		100%{
			-moz-transform:translateX(100px);
			opacity:1
			}
		}
	.coll{
		width:400px;
		height:100%;
		float:left;
		}
	ul{
		width:100%;
		height:100%;
		}
	ul li{
		list-style:none;
		float:left;
		position:relative;  /*相对定位*/
		overflow:hidden;    /*移除部分隐藏*/
		}
	.li1{
		width:100%;
		height:24%;
		margin-bottom:2%;
		
		}
	.li2{
		width:49%;
		height:24%;
		
		}
	.li3{
		width:49%;
		height:24%;
		margin-left:2%;
		
		}
	.li4{
		width:49%;
		height:24%;
		margin-top:2%;
		
		}
	.li5{
		width:49%;
		height:24%;
		margin-left:2%;
		margin-top:2%;
		}
	.li6{
		width:100%;
		height:24%;
		margin-top:2%;
		}
	article ul li div{
		width:100%;
		height:100%;
		font-size:20px;
		color:#FF0;
		text-align:center;
		line-height:155px;
		position:absolute;    /*使用绝对定位*/
		
		-moz-transition:all 0.5s ease-in;   /*过渡*/
		}
	
	.li1 div:first-child{
		background:url(images/images/blue.jpg) no-repeat;
		background-size:cover;
		}
	.li1 div:last-child{
		background:url(images/images/summer.jpg) no-repeat;
		top:100%;
		}
	.li1:hover div{
		-moz-transform:translateY(-100%);
		}
	.li2 div:first-child{
		background-color:red;
		}
	.li2 div:last-child{
		background-color:orange;
		right:100%;
		}
	.li2:hover div{
		-moz-transform:translateX(100%);
		}
	.li3 div:first-child{
		background-color:blue;
		}
	.li3 div:last-child{
		background-color:green;
		right:-100%;
		}
	.li3:hover div{
		-moz-transform:translateX(-100%);
		}
	.li4 div:first-child{
		background-color:gray;
		}
	.li4 div:last-child{
		background-color:pink;
		right:-100%;
		}
	.li4:hover div{
		-moz-transform:translateX(-100%);
		}
	.li5 div:first-child{
		background-color:#09c;
		}
	.li5 div:last-child{
		background-color:#60f;
		right:100%;
		}
	.li5:hover div{
		-moz-transform:translateX(100%);
		}
	.li6 div:first-child{
		background:url(images/images/summer.jpg) no-repeat;
		}
	.li6 div:last-child{
		background:url(images/images/blue.jpg) no-repeat;
		background-size:cover;
		top:-100%;
		}
	.li6:hover div{
		-moz-transform:translateY(100%);
		}
</style>
</head>

<body>
	<header>
    	欢迎使用WIN8操作系统
    </header>
    <article>
    	<div class="coll">
        	<ul>
            	<li class="li1">
                	<div>您好!!!</div>
                    <div>中国!!!</div>
                </li>
                <li class="li2">
                	<div>您好!!!</div>
                    <div>中国!!!</div>
                </li>
                <li class="li3">
                	<div>您好!!!</div>
                    <div>中国!!!</div>
                </li>
                <li class="li4">
                	<div>您好!!!</div>
                    <div>中国!!!</div>
                </li>
                <li class="li5">
                	<div>您好!!!</div>
                    <div>中国!!!</div>
                </li>
                <li class="li6">
                	<div>您好!!!</div>
                    <div>中国!!!</div>
                </li>
            </ul>
        </div>
    </article>
    <footer>
    	<p>湖南衡阳<span>源辰信息科技有限公司&copy;版权所有</span>2014-01-01</p>
    </footer>
</body>
</html>
